<!-- 页面 -->
<template>
    <div>
        <van-nav-bar title="特色课">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-dropdown-menu>
            <van-dropdown-item title="分类" ref="item">
                <div style="padding: 5px 16px; width: 40%; float: left;">
                    <van-button plain block type="primary">重置</van-button>
                </div>
                <div style="padding: 5px 16px; width: 40%; float: right;">
                    <van-button color="#eb6100" type="danger" block >
                        确认
                    </van-button>
                </div>
            </van-dropdown-item>
            <van-dropdown-item title="排序" ref="item">
                <van-cell center title="综合排序" style="text-align: center; font-size: 20px;" />
                <van-cell center title="最新" style="text-align: center; font-size: 20px;" />
                <van-cell center title="最热" style="text-align: center; font-size: 20px;" />
                <van-cell center title="价格从低到高" style="text-align: center; font-size: 20px;" />
                <van-cell center title="价格从高到低" style="text-align: center; font-size: 20px;" />
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="item">
                <van-grid>
                    <van-grid-item v-for="(item,index) in list" :key="index" :class="xuan == index ? 'red' : ''" @click="aa(index,item.course_type)">{{ index|asas }}</van-grid-item>
                </van-grid>
                
            </van-dropdown-item>
        </van-dropdown-menu>

        <van-card v-for="(item,index) in list1" :key="index"   >
            <template #tags>
                <div>
                    <p style="font-size: 20px;">{{ item.title }}</p>
                    <p>1970-01-20 03:60:00|共{{ item.sales_num }}课时</p>
                    <van-icon name="phone" /> {{ item.teachers_list[0].teacher_name }}
                </div>
                {{item.browse_num}}人已报名
            </template>
            <template #footer>
                <span style="color: green;">{{item.price|asas1}}</span> 
            </template>
        </van-card>
        <xia co="1"></xia>
    </div>
</template>
<!-- vue -->
<script>
import xia from '@/components/xia.vue';
export default {
    components: {
        xia,
    },
    data() {
        return {
            // 声明的属性
            xuan: 0,
            list:[],
            list1:[],
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('http://120.53.31.103:84/api/app/courseBasis').then(res => {
            this.list=res.data.data.list
            // console.log(this.list);
            this.list1 = this.list
        })
        // this.$axios.get('http://120.53.31.103:84/api/app/courseBasis').then(res => {
        //     console.log(res);
        // })
    },
    // 调用方法
    methods: {
        aa(va,typ) {
            this.xuan = va
            var obj = []
            this.list.forEach((item)=>{
                if(item.course_type == typ){
                    obj.push(item)
                }
            })
            this.list1 = obj
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
        asas1(value){
            if(value==0){
                return '免费'
            }
            return value
        },
        asas(value){
            var zxc = ''
            if(value == 0){
                zxc = '全部'
            }else if (value == 1){
                zxc = '大班课'
            }else if(value == 2){
                zxc = '小班课'
            }else if(value == 3 ){
                zxc = '公开课'
            }else if(value == 4 ){
                zxc = '点播课'
            }else if(value == 5 ){
                zxc = '面授课'
            }else if(value == 6 ){
                zxc = '音频课'
            }else if(value == 7 ){
                zxc = '系统课'
            }else if(value == 8 ){
                zxc = '图文课'
            }else if(value == 9 ){
                zxc = '会员课'
            }
            return zxc
        }
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.buo {
    width: 100%;
    height: 50px;
    margin-top: 30px;
}

.kebu1 {
    width: 50%;
    float: left;
}

.kebu2 {
    width: 50%;
    float: right;
}

.red {
    color: red !important;
}
</style>